<template>
<!--  TODO:热销商品修改路径-->
<Title path="/??">
  <span class='title'>
    热销商品
  </span>
</Title>

  <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"


  >
    <li v-for="item in list" :id="item._id">
      <Commodity :data="item"/>

    </li>

  </van-list>


</template>

<script setup lang="ts">
import { ref } from 'vue'
import Title from '../Today/Title/index.vue'
import Commodity from './Commodity/index.vue'

export interface Ilist {
  _id:string,
  thumb:string,
  title:string,
  num:number,
  origin_price:number,
  price:number,
  link:string,
}

const list = ref<Ilist[]>([
  {
    _id:'1',
    thumb:'/src/assets/image/f86ad329c55f88ebd46c2c03d371d4b7.jpeg',
    title:'美的(Midea)破壁机高速加热破壁机智能菜...',
    num:75,
    origin_price:499.00,
    price:299.00,
    link:'/??',
  },
  {
    _id:'2',
    thumb:'/src/assets/image/f86ad329c55f88ebd46c2c03d371d4b7.jpeg',
    title:'美的(Midea)破壁机高速加热破壁机智能菜...',
    num:75,
    origin_price:499.00,
    price:299.00,
    link:'/??',
  },
  {
    _id:'3',
    thumb:'/src/assets/image/f86ad329c55f88ebd46c2c03d371d4b7.jpeg',
    title:'美的(Midea)破壁机高速加热破壁机智能菜...',
    num:75,
    origin_price:499.00,
    price:299.00,
    link:'/??',
  },
  {
    _id:'4',
    thumb:'/src/assets/image/f86ad329c55f88ebd46c2c03d371d4b7.jpeg',
    title:'美的(Midea)破壁机高速加热破壁机智能菜...',
    num:75,
    origin_price:499.00,
    price:299.00,
    link:'/??',
  }
]);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {

    loading.value = true

    //TODO: 使用 axios 请求数据

    new Promise((res,rej)=>{

      for (let i = 0;i<3;i++){
        list.value.push(list.value[0])
      }
      res('成功')
    }).then((res)=>{
      setTimeout(()=>{
        // 加载状态结束
        loading.value = false;
        // 数据全部加载完成
        if(list.value.length >= 20) finished.value = true;
      },1000)
    })
    .catch(error=>{
      console.log(error)
    })


  }, 1000);
};
</script>

<style scoped lang="scss">
.title{
  font: {
    size: 18px;
    weight: 700;
  }
  padding-left: 5px;
  position: relative;
  &:before{
    content: '';
    display: block;
    position: absolute;
    height: 90%;
    width: 5px;
    background-color: red;
    left: -5px;
    top: 5%;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }
}
.icon{
  transform:rotate(90deg)
}
li{
  list-style: none;
}
</style>